<template>
  <a-card :bordered="false">
    <!--表头条件搜索  -->
    <a-form-model layout="inline" :model="unitTestform">
      <a-form-model-item
        ><a-input placeholder="交易名称" style="width: 150px" v-model="unitTestform.tranName"></a-input
      ></a-form-model-item>
      <a-form-model-item>
        <a-select placeholder="响应类型" v-model="unitTestform.respType" style="width: 150px">
          <a-select-option v-for="respType in respTypeList" :key="respType">{{ respType }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-select placeholder="测试版本" v-model="unitTestform.testVer" style="width: 150px">
          <a-select-option v-for="testVer in testVerList" :key="testVer">{{ testVer}}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
          <a-date-picker placeholder="查询日期" format="YYYY-MM-DD" v-model="unitTestform.startDate" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="search" @click="handleSubmit">搜索</a-button></a-form-model-item
      >
      <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }"
        ><a-button type="primary" icon="sync" @click="resetForm">重置</a-button></a-form-model-item
      >
    </a-form-model>
    <br />
    <!-- 主体表格内容 -->
    <div style="margin-bottom: 16px">
      <a-button type="primary" icon="plus" @click="showModal">新增</a-button>&nbsp;&nbsp;
      <a-popconfirm title="确定要删除吗？" @confirm="delUnitTest">
        <a-icon slot="icon" type="question-circle-o" style="color: red" />
        <a-button type="danger" :disabled="!hasSelected" icon="delete">删除</a-button>
      </a-popconfirm>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
      :pagination="false"
    >
      <a slot="action" slot-scope="text">
        <!-- 展示服务修改按钮 -->
        <a-button type="primary" shape="circle" icon="edit"  />
      </a>
    </a-table>
    <br />
    <!-- 分页组件 -->
    <a-pagination v-model="currentpage" :total="total" :pageSize="pageSize" @change="pageChange" />
    <!-- 单元测试新增Modal -->
    <a-modal v-model="unitTestModalvisible" title="新增单元测试" width="1200px" >
      <a-form-model :model="createUnitTest" :rules="unitTestRules" ref="ruleForm"
        :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="交易码" prop="transId">
                <a-select placeholder="请选择交易码" v-model="createUnitTest.transId" @change="selectTran" style="width: 150px">
                  <a-select-option v-for="transId in transIdList" :key="transId" >{{ transId }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="交易名称" prop="tranName">
                <a-select placeholder="请选择交易名称" v-model="createUnitTest.tranName" style="width: 150px">
                  <a-select-option v-for="tranName in tranNameList" :key="tranName" >{{ tranName }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-button type="primary">一键查询</a-button>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="测试返回报文" prop="tranName">
                <a-textarea ></a-textarea>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="帐号">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="帐号中文名">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="起始日期">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="终止日期">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="交易机构代号">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="最小柜员流水">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="借贷标志">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="交易码">
                <a-input style="width: 150px"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-button type="primary">查询</a-button>&nbsp;&nbsp;
              <a-button type="primary">导出</a-button>&nbsp;&nbsp;
              <a-button type="primary">保存</a-button>&nbsp;&nbsp;
            </a-col>
          </a-row>
      </a-form-model>
    </a-modal>
    
  </a-card>
</template>

<script>
import {getTransIdList,getTranName} from '@/api/trans/tran'
import { getStore } from '@/utils/storage'

export default {
  data() {
    return {
      tranNameList:[],
      transIdList:[],
      unitTestform:{},
      unitTestModalvisible:false,
      createUnitTest:{},
      unitTestRules:{},
      currentpage: 1,
      total: 0,
      pageSize: 8,
      data: [],
      testVerList:[],
      respTypeList:[],
      columns: [
        { title: '交易码', dataIndex: 'transId', key: 'transId' },
        { title: '交易名称', dataIndex: 'tranName', key: 'tranName' },
        { title: '测试版本', dataIndex: 'testVer', key: 'testVer' },
        { title: '开始日期', dataIndex: 'startDate', key: 'startDate' },
        { title: '结束日期', dataIndex: 'endDate', key: 'endDate' },
        { title: '响应类型', dataIndex: 'respType', key: 'respType' },
        { title: '测试反馈', dataIndex: 'testResp', key: 'testResp' },
        { title: '操作', key: 'operation', fixed: 'right', width: 250, scopedSlots: { customRender: 'action' } },
      ],
      selectedRowKeys: [],
    }
  },

  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },

  created() {
    this.getTransIdList();
  },

  methods: {
    delUnitTest(){

    },

    showModal(){
      this.unitTestModalvisible=true;
    },

    handleSubmit(){

    },

    resetForm(){

    },

    pageChange(){

    },
    
    onSelectChange(selectedRowKeys) {
      //console.log('select', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },

    getTransIdList(){
      getTransIdList().then(res=>{
        this.transIdList=res.result;
      })
    },
    
    selectTran(value){
      console.log('value',value); 
      getTranName(value).then(res=>{
        this.tranNameList=res.result;
      })   
    },      

  },
}
</script>

